<template>
<!--todo:个人信息-->
<div>
    <navigator-menu></navigator-menu>
    <div class="outer">
        <div class="top">
            <div class="profilePhoto" :style="{'background-image':'url('+imageUrl+')'}"></div>
            <p style="font-size:1.5rem;color:white;font-weight:600;">{{username}}({{realName}})</p>
            <p  v-if="this.isBookman" style="font-size:1rem;color:#757575;font-weight:600;">认证时间:{{claimTime}}</p>
            <inform v-if="this.userIdIn!=this.userId" :userId="userId" :userIdIn="userIdIn"></inform>
            <div class="buttonOut" v-if="userIdIn!=userId">
                <button v-show="!isFollow" class="button" @click="follow">关注</button>
                <button v-show="isFollow" class="button" @click="sendmessage=true">发送信息</button>
                <el-dialog
                    v-model="sendmessage"
                    title="发送私信"
                    width="40%"
                    >
                    <p style="margin: 3rem 0">发送给：</p>
                    <el-input v-model="username" disabled />
                    <p style="margin: 3rem 0">标题</p>
                    <el-input v-model="title" />                    
                    <p style="margin: 3rem 0">内容：</p>
                    <el-input
                        v-model="message"
                        :rows="4"
                        type="textarea"
                        placeholder="请输入私信内容，不少于50字"
                    />
                    <template #footer>
                        <span class="dialog-footer">
                        <el-button @click="sendmessage = false">取消</el-button>
                        <el-button type="primary" @click="sendMsg"
                            >发送</el-button
                        >
                        </span>
                    </template>
                </el-dialog>
                <p v-if="isFollow" @click="unfollow" style="text-decoration: underline;cursor: pointer;color:white">取消关注</p>
            </div>
        </div>
        <div class="bottom">
            <div class="bottomOut">
                <div class="bottomLeft">
                    <div class="overViewData myStyle">
                        <div style="width:43vw;height:4rem;display:flex;align-items:center;justify-content:flex-satrt">
                            <p style="font-size:1.2rem;color:#757575;margin-left:1rem;">关于{{username}}</p>
                        </div>
                        <div style="width:43vw;display:block;">
                            <div style="width:43vw;height:0.1rem;background-color: #e0e0e0;"></div>
                        </div>
                        <div style="width:43vw;height:12.5rem;display:flex;flex-direction:column;align-items:center;justify-content:space-around;">
                            <div v-if="this.isBookman" style="width:43vw;display:flex;align-items:center;justify-content:flex-satrt;">
                                <span style="font-size:1.1rem;font-weight:1000;margin-left:1rem;">研究领域</span>
                            </div>
                            <div v-if="this.isBookman" style="width:43vw;display:flex;align-items:center;justify-content:flex-start;">
                                <el-tag type="info" style="margin-left:1rem">{{field}}</el-tag>
                            </div>
                            <div v-if="this.isBookman" style="width:43vw;display:flex;align-items:center;justify-content:flex-satrt">
                                <span style="font-size:1.1rem;font-weight:1000;margin-left:1rem;">个人热度指数</span>
                            </div>
                            <div v-if="this.isBookman" style="width:43vw;display:flex;align-items:center;justify-content:flex-satrt">
                                <el-tag type="warning" style="margin-left:1rem;">{{hotIndex}}</el-tag>
                            </div>
                            <div style="width:43vw;display:flex;align-items:center;justify-content:flex-satrt">
                                <span style="font-size:1.1rem;font-weight:1000;margin-left:1rem;">联系方式:</span><span style="color:#757575;margin-left:1rem">{{email}}</span>
                            </div>
                            <div style="width:43vw;display:flex;align-items:center;justify-content:flex-satrt" v-if="isBookman">
                                <span style="font-size:1.1rem;font-weight:1000;margin-left:1rem;">所属机构:</span><span style="color:#757575;margin-left:1rem">{{affi}}</span>
                            </div>                            
                        </div>
                    </div>
                    <div class="academicData myStyle" v-if="this.isBookman" >
                        <div style="width:43vw;height:4rem;display:flex;flex-direction:row;align-items:center;justify-content:flex-start">
                            <p style="font-size:1.2rem;color:#757575;margin-left:1rem">数据总览</p>
                        </div>
                        <div style="width:43vw;display:block;">
                            <div style="width:43vw;height:0.1rem;background-color: #e0e0e0;"></div>
                        </div>
                        <div style="width:43vw;height:11rem;display:flex;flex-direction:column;align-items:center;justify-content:space-around;">
                            <div style="width:43vw;height:5rem;display:flex;align-items:center;justify-content:space-around;">
                                <div  style="width:10rem;height:4rem;border: 0.1rem solid #bdbdbd;display:flex;flex-direction:row;align-items:center;justify-content:center">
                                    <div style="display:flex;flex-direction:column;align-items:center;justify-content:center;width:4rem;height:3rem;">
                                    <span style="font-size:1.2rem;font-weight:1000">{{read}}</span>
                                    <span>访客量</span>
                                    </div>
                                    <i class="fas fa-eye" style="font-size:1.5rem;margin-left:3rem"></i>
                                </div> 
                                <div  v-if="this.isBookman" style="width:10rem;height:4rem;border: 0.1rem solid #bdbdbd;display:flex;flex-direction:row;align-items:center;justify-content:center">
                                    <div style="display:flex;flex-direction:column;align-items:center;justify-content:center;width:4rem;height:3rem;">
                                    <span style="font-size:1.2rem;font-weight:1000">{{this.paperList.length}}</span>
                                    <span>论文数</span>                                    
                                    </div>
                                    <i class="far fa-sticky-note" style="font-size:1.5rem;margin-left:3rem"></i>
                                </div>                               
                            </div>
                            <div v-if="this.isBookman" style="width:43vw;height:5rem;display:flex;align-items:center;justify-content:space-around;">
                                <div  style="width:10rem;height:4rem;border: 0.1rem solid #bdbdbd;display:flex;flex-direction:row;align-items:center;justify-content:center">
                                    <div style="display:flex;flex-direction:column;align-items:center;justify-content:center;width:4rem;height:3rem;">
                                    <span style="font-size:1.2rem;font-weight:1000">{{hIndex}}</span>
                                    <span>H指数</span>
                                    </div>
                                    <i class="far fa-hourglass" style="font-size:1.5rem;margin-left:3rem"></i>
                                </div> 
                                <div style="width:10rem;height:4rem;border: 0.1rem solid #bdbdbd;display:flex;flex-direction:row;align-items:center;justify-content:center">
                                    <div style="display:flex;flex-direction:column;align-items:center;justify-content:center;width:4rem;height:3rem;">
                                    <span style="font-size:1.2rem;font-weight:1000">{{n_citation}}</span>
                                    <span>总被引数</span>                                    
                                    </div>
                                    <i class="far fa-bookmark" style="font-size:1.5rem;margin-left:3rem"></i>
                                </div> 
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bottomRight">
                    <div class="bottomRightTop myStyle">
                        <div class="rightLeftBlock">
                            <div class="number">
                                <p class="t1">{{numberOfFan}}</p>
                                <p class="t2">粉丝</p>
                                </div>
                                <div class="gapLine">
                                </div>
                                <div class="number">
                                    <p class="t1">{{numberOfFollow}}</p>
                                    <p class="t2">关注</p>
                                </div>
                            </div>                      
                    </div>
                    <div class="bottomRightBottom myStyle" v-if="isBookman">
                        <p style="font-size:1.1rem;color:#757575;margin-top:0.5rem;">合作作者</p>
                        <p v-if="this.relationList.length==0" style="font-size:1.1rem;color:#757575;margin-top:0.5rem;">暂无合作作者</p>
                        <author-card v-for="(item,index) in this.pageData1" :key="index" :username="item.name" :userIdIn="this.userIdIn" :userId="item.id" :imageUrl="item.imageUrl" :cite="item.cite" :affi="item.affi"></author-card>
                        <el-pagination small layout="prev, pager, next" :total="relationList.length" :page-size="pageSize1"
                        v-model:current-page="this.curPage1"                    
                        @current-change="handleCurrentChange1"
                        :hide-on-single-page="true"
                        @size-change="handleSizeChange1" style="margin-bottom:0.5rem;margin-top:0.5rem;"></el-pagination>                    
                    </div>
                </div>
            </div>
            <div class="allPaper myStyle" v-if="this.isBookman">
                <div style="width:65vw;height:4rem;display:flex;flex-direction:row;align-items:center;justify-content:flex-start">
                    <p style="font-size:1.2rem;color:#757575;margin-left:1rem">全部论文</p>
                </div>
                <div style="width:65vw;height:2rem;display:block;">
                    <div style="width:65vw;height:0.1rem;background-color:#e0e0e0;"></div>
                </div>
                <div style="width:65vw;height:30rem;display: flex;flex-direction: column;align-items: center;justify-content: center;">
                    <input class="filterInput" placeholder="输入标题关键字进行筛选" v-model="this.filters.title"/>
                    <el-table :data="this.pageData" style="width: 70%" max-height="350">
                        <el-table-column type="expand">
                        <template #default="props">
                            <p>标题: {{ props.row.title }}</p>
                            <p>出版年份: {{ props.row.year }}</p>
                            <p>引用量: {{ props.row.n_citation }}</p>
                            <p>关键词: {{ props.row.keywords }}</p>
                            <p v-if="false">{{props.row.paperId}}</p>
                            <div style="display:flex;align-items:center;justify-content:center;margin-left:-10rem">
                            <div class="Op" @click="toPaperDetail(props.row.paperId)">
                                <el-tooltip
                                    class="item"
                                    effect="dark"
                                    content="查看文献"
                                    placement="bottom"
                                >
                                <i class="fas fa-search-plus"></i>
                                </el-tooltip>                                 
                            </div>
                            </div>
                        </template>
                        </el-table-column>
                        <el-table-column label="标题" prop="title" />
                        <el-table-column label="作者" prop="author" />
                    </el-table>
                    <el-pagination background layout="prev, pager, next, jumper" :total="tableData.length" :page-size="pageSize"
                    v-model:current-page="this.curPage"                    
                    @current-change="handleCurrentChange"
                    :hide-on-single-page="true"
                    @size-change="handleSizeChange" style="margin-bottom:1rem;margin-top:1rem;"></el-pagination>
                </div>
            </div>
        </div>
    </div>
</div>
</template>

<script>
import NavigatorMenu from "../components/NavigatorMenu";
import Inform from "../components/Inform"
import AuthorCard from "../components/AuthorCard"
import axios from 'axios'
export default {
  name: "MyPage",
  components: {
    NavigatorMenu,
    Inform,
    AuthorCard,
  },
  mounted:function(){
    this.userId = this.$route.query.userId;
    this.userIdIn = this.$route.query.userIdIn;
    const out=document.querySelector('.outer');
    out.classList.add('height');
    const bottomRight=document.querySelector('.bottomRight');
    bottomRight.classList.add('display');
    const bottomLeft=document.querySelector('.bottomLeft');
    bottomLeft.classList.add('display');
    const bottomRightTop=document.querySelector('.bottomRightTop');
    bottomRightTop.classList.add('change-height');
    console.log(this.userId+" "+this.userIdIn);
    axios.get('/api/user', { params: { userId: this.userId } }) ////获取个人信息
    .then(response=> { 
        console.log(this.userId+" "+this.userIdIn);
    console.log(response);
    console.log("test");
    this.username=response.data.data.name;
    this.imageUrl=this.url+response.data.data.avatar;
    this.isBookman=response.data.data.identity==2;//2表示学者
    this.email=response.data.data.mail==null?"暂无":response.data.data.mail;
    if(this.isBookman==true){
    out.classList.remove('height');
    bottomRight.classList.remove('display');
    bottomLeft.classList.remove('display');
    bottomRightTop.classList.remove('change-height');
    console.log(this.isBookman+" 2")
    axios.get('/api/scholar/getByUserId',{params:{userId:this.userId}})//是学者的话继续获取学者的关键信息
    .then(response=>{
      console.log(response);
      this.realName=this.realNameTmp=response.data.data.name;
      this.claimTime=response.data.data.claimTime;
      this.affi=response.data.data.affi==null?"暂无":response.data.data.affi;
      this.field=response.data.data.field;
      this.hotIndex=response.data.data.hotIndex;
      this.scholarId=response.data.data.id;
      this.n_citation=response.data.data.ncitation!=null?response.data.data.ncitation:'0';
      this.hIndex=response.data.data.hindex!=null?response.data.data.hindex:'0';
      if(response.data.data.authorId!=null){
          let arr=response.data.data.authorId.split(",");
          this.authorId=arr[0];
          console.log("test test Test:   "+this.authorId);
          let data=new FormData();
          data.append("ID",this.authorId);
          axios.post('/api/author/relation',data)
          .then(response=>{
              console.log(response);
              response.data.data.forEach((item,index)=>{
                  let tmp={};
                  tmp.avatar="";
                  if(item.avatar!=null){
                      tmp.imageUrl=this.url+item.avatar;
                  }
                  if(item.scholar!=null){
                      tmp.id=item.scholar.userId;
                      tmp.affi=item.scholar.affi==null?"暂无":item.scholar.affi;
                      tmp.name=item.scholar.name;
                      tmp.cite=item.scholar.ncitation;
                      tmp.times=item.times==null?1:item.times;
                  }else{
                      tmp.id="null";
                      tmp.affi=item.affi;
                      tmp.cite=item.n_citation;
                      tmp.times=item.times;
                      tmp.name=item.name;
                  }
                  this.relationList.push(tmp);
              })
          })
      }
          axios.get('/api/scholarPortal',{params:{scholarId:this.scholarId}})//获取访客数
    .then(response=>{
        console.log(response);
        this.read=response.data.data.count;
    })
    .catch(error=>{
        console.log(error);
    });
        axios.post('/api/scholarPortal/getpapershow-byscholarId',{scholarId:this.scholarId})//获取学者展示全部论文
    .then(response=>{
      console.log(response);
      response.data.data.forEach((item,index)=>{
        let paper={};
        paper.title=item.title;
        paper.paperId=item.id;
        paper.year=item.year;
        let authors="暂无,";
        if(item.authors!=null){
            authors="";
        item.authors.forEach((author,index)=>{
          authors=authors+author.name+',';
        })
        }
        paper.author=authors.substr(0,authors.length-1);
        let keywords="暂无,";
        if(item.keywords!=null){
            keywords="";
        item.keywords.forEach((item,index)=>{
          keywords=keywords+item+',';
        })
        }
        paper.keywords=keywords.substr(0,keywords.length-1);
        paper.n_citation=item.n_citation;
        this.paperList.push(paper);
      })
    })
    .catch(error=>{
      console.log(error);
    });
    })
    .catch(error=>{
      console.log(error);
    });
    }
        axios.get('/api/follow/fans',{params:{userId:this.userId}})//获取粉丝列表
    .then(response=>{
      console.log(response);
      let count=0;
      response.data.data.forEach((item,index)=>{
          if(item!=null){
              ++count;
                if(item.id==this.userIdIn){
                    this.isFollow=true;
                }
          }
      })
      this.numberOfFan=count;
    })
    .catch(error=>{
      console.log(error);
    })
    axios.get('/api/follow',{params:{userId:this.userId}})//获取关注列表
    .then(response=>{
      console.log(response);
        let count=0;
            response.data.data.forEach((item,index)=>{
            if(item!=null){
                ++count;
            }
        })
        this.numberOfFollow=count;
    })
    .catch(error=>{
      console.log(error);
    })
}) .catch(function (error) { 
  console.log(error); 
});
  },
  computed:{
          tableData:function(){
        return this.paperList.filter(item => {
          if (this.filters.title) {
            if (!(item.title&& item.title.includes(this.filters.title))) {
              return false;
            }
          }
          return true;
        })
    },
    pageData:function(){
      return this.tableData.slice((this.curPage - 1) * this.pageSize, this.curPage * this.pageSize);
    }, 
    pageData1:function(){
      return this.relationList.slice((this.curPage1 - 1) * this.pageSize, this.curPage1 * this.pageSize1);
    }, 
  },
  data:function(){
      return{
          relationList:[/*
              {
                  name:"111",
                  times:"1",
                  imageUrl:"",
                  id:1,
                  cite:"1",
                  affi:"1",
              },
              {
                  name:"111",
                  times:"1",
                  imageUrl:"",
                  id:1,
                  cite:"1",
                  affi:"1",
              },
              {
                  name:"111",
                  times:"1",
                  imageUrl:"",
                  id:1,
                  cite:"1",
                  affi:"1",
              },
              {
                  name:"111",
                  times:"1",
                  imageUrl:"",
                  id:1,
                  cite:"1",
                  affi:"1",
              },
              {
                  name:"111",
                  times:"1",
                  imageUrl:"",
                  id:1,
                  cite:"1",
                  affi:"1",
              },
              {
                  name:"111",
                  times:"1",
                  imageUrl:"",
                  id:1,
                  cite:"1",
                  affi:"1",
              },*/
          ],
          filters:{
              title:"",
          },
        url:'http://124.70.186.113:39245',
        authorId:"null",
        curPage:1,
        pageSize:5,
        curPage1:1,
        pageSize1:4,
        input:"",
        title:"",//标题
        ss:1,
        realName:"未认证",
        sendmessage:false,
        message:"",//消息
        userIdIn:1,//进来人的
        userId:1,//主页人的
        username:"",
        isBookman:true,//是否是学者
        imageUrl:require('../assets/images/bg.jpg'),
        insImageUrl:require('../assets/images/bua.jpg'),
        isFollow:false,//是否已经关注
        hotIndex:1,
        claimTime:"2021-2-2",
        numberOfFan:0,
        numberOfFollow:0,
        email:"13036552571@163.com",
        field:"",
        read:0,//访客量
        paperCount:"0",//论文数
        scholarId:1,
        hIndex:0,
        n_citation:0,
        paperList:[/*
        {
          paperId:"1",
          title:"深度学习",
          year:"2021-12-1",//出版年份
          n_citation:"222",//引用量
          keywords:"深度学习，深度学习，深度学习",
        },
        {
          paperId:"2",
          title:"浅度学习",
          year:"2021-12-1",//出版年份
          n_citation:"922",//引用量
          keywords:"浅度学习，浅度学习，浅度学习",
        },*/
      ],
      affi:"",
      }
  },
  methods:{
            handleCurrentChange(val) {
        this.curPage = val
      },
      handleSizeChange(val) {
        this.curPage = 1
        this.pageSize = val
      },
        handleCurrentChange1(val) {
        this.curPage1 = val
      },
      handleSizeChange1(val) {
        this.curPage1 = 1
        this.pageSize1 = val
      },
      follow:function(){
          axios.post('/api/follow',{followerId:this.userIdIn,followingId:this.userId})
          .then(response=>{
              console.log(response);
              if(response.data.code==200){
                  this.$message({message:"关注成功",type:'success'});
                  this.isFollow=true;
              }else{
                  this.$message({message:response.data.msg,type:'error'});
                  this.isFollow=false;
              }
          })
          .catch(error=>{
              console.log(error);
          })
      },
      unfollow:function(){
          axios.delete('/api/follow',{data:{followerId:this.userIdIn,followingId:this.userId}})
          .then(response=>{
              console.log("unfollow");
              console.log(response);
            if(response.data.code==200){
                  this.$message({message:"取关成功",type:'success'});
                  this.isFollow=false;
              }else{
                  this.$message({message:"取关失败 "+response.data.msg,type:'error'});
                  this.isFollow=true;
              }
          })
          this.isFollow=false;
      },
      sendMsg:function(){
      //与后端交互，发送信息
      axios.post('/api/communication/message',{content:this.message,title:this.title,senderId:this.userIdIn,ownerId:this.userId})
      .then(response=>{
          console.log(response);
          if(response.data.code==200){
              this.$message({message:"发送成功",type:'success'});
          }else{
              this.$message({message:"发送失败 "+response.data.msg,type:'error'});
          }
      })
      .catch(error=>{
          this.$message({message:"发送失败",type:'error'});
      })
      this.sendmessage=false;
    },
    toPaperDetail:function(paperId){
      //去往论文详情页面
      this.$router.push({path:'/PaperDetail',query:{paperId:paperId}});
    },
  }
}
</script>

<style scoped>
.outer{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  height:200vh;
  width:100vw;
  background-image: url('../assets/images/apple.jpg');
}
.Op{
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.top{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width:65vw;
  height:20vh;
  margin-top:10vh;
}
.bottom{
    width: 100vw;
    height: 170vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.bottomOut{
    width: 65vw;
    height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.profilePhoto{
  width:7rem;
  height:7rem;
  border-radius: 7rem;
  background-size:cover;
  border: solid #9e9e9e;

}
.button{
  width: 10rem;
  height: 3rem;
  border: none;
  background-color: #1e88e5;
  color:white;
  cursor: pointer;
  box-shadow: 0.3rem 0.3rem #1976d2;
}
.button:hover{
    background-color: #1565c0;
}
.buttonOut{
    width:10rem;
    height:6rem;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}
.invisible{
    display: none;
}
.bottomLeft{
    width: 43vw;
    height: 80vh;
    margin-right: 2vw;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
.bottomRight{
    width: 20vw;
    height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    
}
.overViewData{
    width: 43vw;
    height: 17rem;
    background-color: white;
    margin-bottom: 2rem;
}
.academicData{
    width: 43vw;
    height: 15rem;
    background-color: white;
    margin-bottom: 2rem;
}
.allPaper{
    width: 65vw;
    height: 38rem;
    background-color: white;
}

.insPhoto{
  width:5rem;
  height:5rem;
  border-radius: 5rem;
  background-size:cover;
  margin-left: 2rem;
}
input.filterInput{
  width:13rem;
  height:3rem;
  border-left: 0;
  border-right:0;
  border-top: 0;
  border-bottom: 0.15rem solid #311b92;
  font-size: 1rem;
  outline: none;
  margin-bottom: 1rem;
}
.rightLeftBlock{
  display: flex;
  align-items: center;
  justify-content: space-around;
  width:15rem;
  height: 6rem;
}
.number{
  height: 8rem;
  width: 6rem;
}
.number .t1{
  font-size: 1.8rem;
  width:6rem;
  height:3rem;
  margin: 0;
  padding: 0;
  margin-top:2rem;
  font-weight: 900;
  text-align: center;
}
.number .t2{
  font-size:1rem;
  color:grey;
  width: 6rem;
  height: 2rem;
  text-align: center;
  margin-top:0;
}
.gapLine{
  border: 0.05rem solid grey;
  width: 0;
  height: 5rem;
}
.myStyle{
    box-shadow: 0.5rem 0.5rem 1rem #607d8b;
}
.height{
    height: 110vh;
}
.bottomRightTop{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 20vw;
    height: 10rem;
    margin-bottom: 2rem;
    background-color: white;
}
.bottomRightBottom{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    background-color: white;
    width: 20vw;
    height:22rem;
}
.change-height{
    height: 16rem;
}
.display{
    justify-content: center;
}
</style>